<script setup lang="ts">
import BarChart from "@/components/BarChart.vue";
import LineChart from "@/components/LineChart.vue";
import LocationItem from "@/components/LocationItem.vue";
import PieChart from "@/components/PieChart.vue";
import EasyInput from "@/components/EasyInput.vue";
import WeatherItem from "@/components/WeatherItem.tsx";
import SlotKing from "@/components/SlotKing.vue";
</script>

<template>
  <div>
    <div class="flex gap-2 m-5">
      <WeatherItem />
      <div class="flex flex-col items-center gap-1">
        <LocationItem />
        <EasyInput>
          <div class="text-red-500">呵呵</div>
          <template v-slot:prefix>
            <span class="text-gray-500">前缀</span>
          </template>
          <template v-slot:suffix>
            <span class="text-gray-500">后缀</span>
          </template>
        </EasyInput>
        <SlotKing>
          <template v-slot:prefix>
            <i class="prefix-slot el-icon-s-opportunity"></i>
          </template>
          <template v-slot:suffix>
            <i class="suffix-slot el-icon-s-opportunity"></i>
          </template>
        </SlotKing>
      </div>
    </div>
    <main class="main">
      <bar-chart />
      <line-chart />
      <pie-chart title="饼图示例" />
    </main>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.prefix-slot::after {
  content: "";
  width: 1px;
  height: 12px;
  background-color: #aaa;
  display: inline-block;
  margin: 0 5px;
}
</style>
